<template>
  <div style="clear: both"></div>
  <div style="height: calc(100% - 60px);">
    <Table  :show-page="false" ref="tableRef" :show-line-number="true"
            :showCheckBox="false" :data="tcpData" :columns="columns">
    </Table>
  </div>
  <DialogForm ref="editFormRef" :form="editDialogForm" title="编辑" @validateSuccess="validateSuccess">
  </DialogForm>
</template>

<script setup>

import Table from "@/components/plugs/table/Table.vue";
import DialogForm from "@/components/plugs/form/DialogForm.vue";
import {inject, onMounted, onUnmounted, reactive, ref, toRaw} from "vue";
import {FormItemType} from "@/components/plugs/form/DialogFormInterface.js";
import {AXIOS_NAME} from "@/constant/constant.js";
import {ElMessage} from "element-plus";
import {deleteRow, HandleEnum} from "@/utils/utils.ts";

const tableRef = ref(null);
const $axios = inject(AXIOS_NAME);
const searchRef = ref(null);
const editFormRef = ref(null);

const searchFormData = reactive({
  'keyWord': ''
});

const columns = [
  {field:"protocolName","desc": "协议名称"},
  {field:"recv","desc": "接收包"},
  {field:"send","desc": "发送包"},
  {field:"localAddress","desc": "本地地址"},
  {field:"remoteAddress","desc": "外部地址"},
  {field:"state","desc": "状态"},
  {field:"pid","desc": "PID/Program name"},
  {field:"showTime","desc": "创建时间",width: 200}
];

const tcpData = [];
let interval;
onMounted(() => {
  interval = setInterval(function (){
    getLinuxTcpInfo();
  },2000);
});
onUnmounted(() => {
  clearInterval(interval);
});
const getLinuxTcpInfo = () => {
  $axios.post('/tcpMonitor/getLinuxTcpInfo',{}).then(response => {
    const data = response.data;
    tableRef.value.setData(data.data);
  });
}

let items = [];
items.push({type: FormItemType.INPUT_HIDDEN,label: 'id',name: 'id'});
let editDialogForm = reactive({
  splitCol: 1,
  gutter: 20,
  labelWidth: 115,
  items:items,
  rules:{},
});


</script>

<style scoped>

</style>